<template>
  <div class="min-h-screen bg-gray-900 flex">
    <!-- 左侧薄荷绿侧边栏 -->
    <div class="hidden lg:flex lg:w-200px bg-teal-500 flex-col justify-between py-6">
      <!-- 顶部Logo区域 -->
      <div class="px-4">
        <div class="flex items-center space-x-3 mb-8">
          <div class="w-8 h-8 bg-white rounded-md flex items-center justify-center">
            <span class="text-teal-600 font-bold text-lg">M</span>
          </div>
          <span class="text-white font-semibold">MetaSystem</span>
        </div>

        <!-- 用户信息区域 -->
        <div class="bg-teal-400 rounded-lg p-4 mb-6">
          <div class="flex items-center space-x-3">
            <div class="relative">
              <img
                src="https://via.placeholder.com/40"
                class="w-10 h-10 rounded-full"
                alt="用户头像"
              />
              <div
                class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white"
              ></div>
            </div>
            <div>
              <div class="text-white font-medium">用户名</div>
              <div class="flex space-x-2 text-xs text-teal-100">
                <span>0/0/0</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部同步状态 -->
      <div class="px-4">
        <div class="flex items-center justify-between text-white text-sm">
          <div class="flex items-center space-x-2">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
                clip-rule="evenodd"
              />
            </svg>
            <span>同步中</span>
          </div>
          <button class="p-1 rounded hover:bg-teal-400">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 右侧登录区域 -->
    <div class="flex-1 flex items-center justify-center p-8">
      <div class="w-full max-w-md">
        <!-- 顶栏（移动端显示） -->
        <div class="lg:hidden flex items-center justify-between mb-8">
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 bg-teal-500 rounded-md flex items-center justify-center">
              <span class="text-white font-bold text-lg">M</span>
            </div>
            <span class="text-white font-semibold">MetaSystem</span>
          </div>
        </div>

        <!-- 登录卡片 -->
        <el-card class="login-card bg-white rounded-lg shadow-sm">
          <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">欢迎回来</h1>
            <p class="text-gray-600">登录您的账户以继续</p>
          </div>

          <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="用户名或邮箱"
                size="large"
                :prefix-icon="User"
                class="custom-input"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                size="large"
                :prefix-icon="Lock"
                show-password
                class="custom-input"
              />
            </el-form-item>

            <div class="flex items-center justify-between mb-6">
              <el-checkbox v-model="rememberMe" class="custom-checkbox">
                记住我
              </el-checkbox>
              <a href="#" class="text-sm text-teal-600 hover:text-teal-500">忘记密码？</a>
            </div>

            <el-button
              type="primary"
              size="large"
              class="w-full login-btn"
              @click="handleLogin"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form>

          <div class="mt-6 text-center">
            <p class="text-gray-600 text-sm">
              没有账户？
              <a href="#" class="text-teal-600 hover:text-teal-500 font-medium"
                >立即注册</a
              >
            </p>
          </div>
        </el-card>

        <!-- 三区快速入口 -->
        <div class="grid grid-cols-3 gap-4 mt-6">
          <div
            class="bg-gray-800 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-700 transition-colors"
          >
            <div class="w-3 h-3 bg-blue-500 rounded-full mx-auto mb-2"></div>
            <span class="text-white text-sm">知识库</span>
          </div>
          <div
            class="bg-gray-800 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-700 transition-colors"
          >
            <div class="w-3 h-3 bg-yellow-500 rounded-sm mx-auto mb-2"></div>
            <span class="text-white text-sm">组件库</span>
          </div>
          <div
            class="bg-gray-800 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-700 transition-colors"
          >
            <div class="w-3 h-3 bg-red-500 rotate-45 mx-auto mb-2"></div>
            <span class="text-white text-sm">学习区</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";

// 响应式数据
const loginForm = reactive({
  username: "",
  password: "",
});

const rememberMe = ref(false);
const loading = ref(false);
const loginFormRef = ref();

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: "请输入用户名或邮箱", trigger: "blur" },
    { min: 3, message: "用户名长度至少为3位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度至少为6位", trigger: "blur" },
  ],
};

// 登录处理
const handleLogin = async () => {
  if (!loginFormRef.value) return;

  try {
    const valid = await loginFormRef.value.validate();
    if (valid) {
      loading.value = true;
      // 模拟登录API调用
      await new Promise((resolve) => setTimeout(resolve, 1500));

      ElMessage.success("登录成功！");
      // 实际项目中这里会进行路由跳转
      // router.push('/dashboard')
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
  } catch (error) {
    ElMessage.error("登录失败，请检查用户名和密码");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-card {
  border: none;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.login-card :deep(.el-card__body) {
  padding: 2rem;
}

.custom-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb;
  transition: box-shadow 0.2s ease;
}

.custom-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #00a99d;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #00a99d;
}

.login-btn {
  background-color: #00a99d;
  border-color: #00a99d;
  transition: all 0.2s ease;
}

.login-btn:hover {
  background-color: #009688;
  border-color: #009688;
  transform: translateY(-1px);
}

.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00a99d;
  border-color: #00a99d;
}

.custom-checkbox :deep(.el-checkbox__label) {
  color: #6b7280;
}
</style>
